<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="shortcut icon" href="favicon.ico">

    <title>登陆</title>

    <!-- Bootstrap core CSS -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">

    <!-- Custom styles for this template -->
    <style type="text/css">
      	.view-login {
			padding-top: 0;
			background-color: #142849;
			background-image: -webkit-gradient(radial,center center,0,center center,460,from(#165387),to(#142849));
			background-image: -webkit-radial-gradient(circle,#165387,#142849);
			background-image: -moz-radial-gradient(circle,#165387,#142849);
			background-image: -o-radial-gradient(circle,#165387,#142849);
			background-repeat: no-repeat;
		}

		.view-login .container {
			width: 300px;
			position: absolute;
			top: 50%;
			left: 50%;
			margin-top: -206px;
			margin-left: -150px;
			padding-left: 0px;
			padding-right: 0px;
		}

		.view-login .container.modal-body {
			width: 180px;
			margin-top: -120px;
			margin-left: -90px;
			text-align: center;
		}

		.view-login .container.modal-body .well {
			padding:20px;
			margin: 0;
		}

		.view-login .container.modal-body span {
			line-height: 25px;
		}

		.view-login .well {
			padding-bottom: 0;
			-webkit-box-shadow: 0px 0px 60px rgba(0, 0, 0, 0.5), 0px 1px 0px rgba(255, 255, 255, 0.9) inset;
			-moz-box-shadow: 0px 0px 60px rgba(0, 0, 0, 0.5), 0px 1px 0px rgba(255, 255, 255, 0.9) inset;
			box-shadow: 0px 0px 60px rgba(0, 0, 0, 0.5), 0px 1px 0px rgba(255, 255, 255, 0.9) inset;
		}

		.modal {
			overflow-y: auto;
		}

		.navbar-fixed-bottom {
			background: #EDEDED;
			border-top: 1px solid #DDDDDD;
			padding: 2px 10px 4px 10px;
			-webkit-box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.8) inset, 0px -1px 1px rgba(255, 255, 255, 0.6);
			-moz-box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.8) inset, 0px -1px 1px rgba(255, 255, 255, 0.6);
			box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.8) inset, 0px -1px 1px rgba(255, 255, 255, 0.6);
			color: #999999;
			font-size: 12px;
		    min-height: 30px;
		    padding: 2px 10px 4px 10px;
		}


	</style>
    <!-- Just for debugging purposes. Don't actually copy this line! -->
    <!--[if lt IE 9]><script src="js/ie8-responsive-file-warning.js"></script><![endif]-->

    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>

  <body class="view-login">
  	<!-- Container -->
	<div class="container">
		<div id="content"><!-- Begin Content -->
			<div class="well">
				<img src="images/logo.png" alt="Material!" />
				<hr />
				<div id="alert-login" class="alert hide"></div>
				<form action="user/login" method="post" id="form-login">
					<div class="input-group">
					  <span class="input-group-addon glyphicon glyphicon-user"></span>
					  <input type="text" name="account" class="form-control" placeholder="账    号" autocomplete="off">
					</div><br>

					<div class="input-group">
					  <span class="input-group-addon glyphicon glyphicon-lock"></span>
					  <input type="password" name="password" class="form-control" placeholder="密    码" autocomplete="off">
					</div><br>

					<div class="input-group">
					  <span class="input-group-addon glyphicon glyphicon-copyright-mark"></span>
					  <input type="text" name="captcha" class="form-control" placeholder="验证码" autocomplete="off">
					  <span class="input-group-addon" style="padding:0 2px 0 2px;width: 90px;"><img name="captcha" title="点击刷新" src="user/captcha" class="img-rounded" style="cursor: pointer;"></span>
					</div><br>
					
					<div class="input-group" style="width:100%;">
					  <p>
					  	<button type="submit" class="btn btn-primary btn-lg btn-block" disabled="disabled">登&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;陆</button>
					  </p>
					</div>
				</form>
			</div>
		</div><!-- End Content -->
	</div>

    <!-- Begin Status Module -->
	<div class="navbar navbar-fixed-bottom hidden-phone">
	    <div class="toolbar pull-right">
	        <p>© 2014 Mailerm</p>
	    </div>
	</div>
	<!-- End Status Module -->

	<!-- hidden elements -->
	<div class="fade modal" id="modal-load">
	  <div class="modal-body container">
	  	<div class="well"> 
	  		<img src="images/loader.gif"><br><br>
	  		<span class="label label-info">登录中请稍后...</span>
	  	</div>
	  </div>
	</div>
	
    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="js/jquery.min.js"></script>
	<script src="js/bootstrap.min.js"></script>
  	<script type="text/javascript">
		$( document ).ready(function() {
			$("#form-login").find("input[name='account']").select().focus();
			$("#form-login").find("img[name='captcha']").click(function(){
			  	$(this).attr("src", "user/captcha?" + new Date().getTime());
			});
			// bind enter
			$("#form-login").find("input").keypress(function(event) {
		        if (event.keyCode == 13) {
		        	if ($.trim($(this).val()).length == 0) {
		        		$(this).parent().addClass('has-error');
		        		$(this).val('');
		        	} else {
		        		var ready = true;
	        			$("#form-login").find("input").each(function() {
	        				if ($.trim($(this).val()).length == 0) {
	        					$(this).parent().addClass('has-error');
	        					$(this).focus();
	        					ready = false;
	        					return false;
	        				}
	        			});
	        			if (ready) {
	        				$("#form-login").find(":input[type=submit]").removeAttr('disabled');
	        			} else {
	        				$("#form-login").find(":input[type=submit]").attr('disabled','disabled');
	        				var next = $(this).parent().next().next().find(":input");
		        			if (next.attr('name') != undefined) next.focus();
	        			}
		        	}
		        }
		    });
		    // skip space
			$("#form-login").find("input").keydown(function(e){
			    if (e.which === 32) e.preventDefault();
			})
			// check data
			$("#form-login").find("input").change(function(event) {
	        	if ($.trim($(this).val()).length != 0) {
	        		$(this).parent().removeClass('has-error');
	        		var ready = true;
        			$("#form-login").find("input").each(function() {
        				if ($.trim($(this).val()).length == 0) {
        					ready = false;
        					return false;
        				}
        			});
        			if (ready) {
        				$("#form-login").find(":input[type=submit]").removeAttr('disabled');
        			} else {
        				$("#form-login").find(":input[type=submit]").attr('disabled','disabled');
        			}
	        	} else {
	        		$("#form-login").find(":input[type=submit]").attr('disabled','disabled');
	        	}
		    });
		    $("#form-login").find("input").keyup(function(event) {
	        	if ($.trim($(this).val()).length != 0) {
	        		$(this).parent().removeClass('has-error');
	        		var ready = true;
        			$("#form-login").find("input").each(function() {
        				if ($.trim($(this).val()).length == 0) {
        					ready = false;
        					return false;
        				}
        			});
        			if (ready) {
        				$("#form-login").find(":input[type=submit]").removeAttr('disabled');
        			} else {
        				$("#form-login").find(":input[type=submit]").attr('disabled','disabled');
        			}
	        	} else {
	        		$("#form-login").find(":input[type=submit]").attr('disabled','disabled');
	        	}
		    });
		    // hook submit
		    $("#form-login").submit(function(e){
		    	var form = $(this);
		    	$.ajax({
		            type: form.attr('method'),
		            url: form.attr('action'),
		            data: form.serialize(),
		 			beforeSend: function () {
						$('#modal-load').modal({backdrop: 'static',show:true, keyboard: false});
						$("#alert-login").html('').hide();
		    		},
		            success: function(data, status) {
		            	if (data == undefined || data.status == undefined || data.status != 0) {
		            		var msg = '';
		            		if (data.status == undefined) msg = '服务器未知错误，请稍后再试...';
		            		else if (data.status == 1) msg = '输入信息有误！';
		            		else if (data.status == 2) msg = '验证码输入不正确。';
		            		else if (data.status == 3) msg = '用户名或密码错误！';
		            		else if (data.status == 4) msg = '服务器处理异常，请稍后再试...';
	      				    else if (data.status == 5) msg = '项目暂停，暂不可用。';
		            		else if (data.status == 6) msg = '项目筹备中，暂不可用。';
		            		else if (data.status == 7) msg = '项目已结束！';
		            		else msg = '服务器错误！';
		            		$("#alert-login").attr('class', 'alert alert-danger').html(msg).show();
		            		$("#form-login").find("img[name='captcha']").attr("src", "user/captcha?" + new Date().getTime());
		            		$("#form-login").find("input[name='password']").val('');
		            		$("#form-login").find("input[name='captcha']").val('');
		            		$("#form-login").find(":input[type=submit]").attr('disabled','disabled');

		            		$('#modal-load').modal('hide');
		            	} else {
		            		$("#modal-load").find("span").attr('class', 'label label-success').html('登陆成功，请稍后...');
		            		setTimeout(function(){location.href="home.html"} , 3000);
		            	}
		            },
		            error: function(hxr, status, error) {
		            	$("#alert-login").attr('class', 'alert alert-danger').html(error).show();
	            		$("#form-login").find("img[name='captcha']").attr("src", "user/captcha?" + new Date().getTime());
	            		$("#form-login").find("input[name='password']").val('');
	            		$("#form-login").find("input[name='captcha']").val('');
	            		$("#form-login").find(":input[type=submit]").attr('disabled','disabled');
		            	$('#modal-load').modal('hide');
		            }
		        });
		    	return false;
		    });

		});
	</script>
  </body>
</html>